/*
  学习目标：useState使用的三个注意事项
*/

import { useState } from 'react';

export default function App() {
  // 1. useState可以多次调用, 声明多个状态
  const [count, setCount] = useState(99);
  const [msg, setMsg] = useState('hello React');

  // 2. useState可以声明任意数据类型
  let [person, setPerson] = useState({ name: 'zs', age: 18 });

  // 👍 const [变量名, set+驼峰名变量名] = useState(初始值)
  // 快捷键: useState

  return (
    <div>
      <h1>
        {person.name} - {person.age}
      </h1>
      <button
        onClick={() => {
          // 3. ✅更新数据, 仍要使用不可变数据, 新值覆盖旧值
          setPerson({ name: 'ls', age: 19 });
          // ❌person.name = 'ls';
          // ❌person = { name: 'ls', age: 19 };
        }}
      >
        点我更新name
      </button>
      <h1>
        数量: {count} - {msg}
      </h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我+ 1
      </button>
      <button
        onClick={() => {
          setMsg(msg + '~');
        }}
      >
        点我+~
      </button>
    </div>
  );
}
